<template>
  <div>
    <el-divider>基本信息</el-divider>
    <div class="dialog_left children">
      <el-descriptions direction="vertical" :column="4" border>
        <el-descriptions-item label="申请单号" :labelStyle="labelStyle">{{ form.outsourceNum || '-' }}
        </el-descriptions-item>
        <el-descriptions-item label="设备编号">{{
        form.repairVo && form.repairVo.repairEquipmentAccountVo.eaPartInfoVo.equipmentNum || '-'
        }}</el-descriptions-item>
        <el-descriptions-item label="设备名称">{{
        form.repairVo && form.repairVo.repairEquipmentAccountVo.eaPartInfoVo.equipmentName || '-'
        }}
        </el-descriptions-item>
        <el-descriptions-item label="规格型号">{{
        form.repairVo && form.repairVo.repairEquipmentAccountVo.eaPartInfoVo.model || '-'
        }}</el-descriptions-item>
        <el-descriptions-item label="供应商" :labelStyle="labelStyle">{{
        form.repairVo && form.repairVo.repairEquipmentAccountVo.eaPartInfoVo.supplierName || '-'
        }}</el-descriptions-item>
        <el-descriptions-item label="设备状态">
          <div
            :style="'color:' + ['#67C23A', '#E6A23C', '#409EFF', '#F56C6C'][form.repairVo && form.repairVo.repairEquipmentAccountVo.status]">
            <i
              :class="['el-icon-circle-check', 'el-icon-warning-outline', 'el-icon-remove-outline', 'el-icon-circle-close'][form.repairVo && form.repairVo.repairEquipmentAccountVo.status]" />
            <span>
              {{ ['正常', '带病运行', '检修中', '故障'][form.repairVo && form.repairVo.repairEquipmentAccountVo.status] }}
            </span>
          </div>
        </el-descriptions-item>
        <el-descriptions-item label="所属部门">{{
        form.repairVo && form.repairVo.repairEquipmentAccountVo.eaPartInfoVo.deptName || '-'
        }}</el-descriptions-item>
        <el-descriptions-item label="位置">{{
        form.repairVo && form.repairVo.repairEquipmentAccountVo.eaPartInfoVo.placeName || '-'
        }}</el-descriptions-item>
      </el-descriptions>
    </div>
    <el-divider>故障信息</el-divider>
    <div class="dialog_left children">
      <el-descriptions :column="4" border>
        <el-descriptions-item label="故障等级" :span="4" :labelStyle="labelStyle">
          <div :style="'color:' + ['#F56C6C', '#E6A23C', '#409EFF'][form.repairVo && form.repairVo.faultLevel]">
            <!-- <i :class="['el-icon-circle-close', 'el-icon-success', 'el-icon-remove'][row.faultLevel]" /> -->
            <span>
              {{ ['紧急 ', '严重 ', '一般'][form.repairVo && form.repairVo.faultLevel] }}
            </span>
          </div>
        </el-descriptions-item>
        <el-descriptions-item label="故障描述" :span="4" :labelStyle="labelStyle">
          {{ form.repairVo && form.repairVo.faultDescribe || '-' }}</el-descriptions-item>
        <el-descriptions-item label="故障图片" :span="4" :labelStyle="labelStyle">
          <div v-if="repairImages(form.repairVo && form.repairVo.repairImages, 0).length">
            <Image-preview v-for="(item, i) in repairImages(form.repairVo && form.repairVo.repairImages, 0)"
              style="margin-left:20px" :key="i" :src="item.image" width="100px" height='100px'></Image-preview>
          </div>
          <div v-else style="color: #ccc;">
            暂无图片信息
          </div>
        </el-descriptions-item>
        <el-descriptions-item label="故障视频" :span="4" :labelStyle="labelStyle">
          <video v-if="form.repairVo && form.repairVo.faultVideo" :src="form.repairVo && form.repairVo.faultVideo"
            width="390" height="200" style="background-color: black" controls="controls">
            您的浏览器不支持视频播放
          </video>
          <div v-else style="color: #ccc;">暂无视频信息</div>

        </el-descriptions-item>
      </el-descriptions>
    </div>
    <div v-if="form.selectMode == 1">
      <el-divider>委外服务商</el-divider>
      <div class="dialog_left children">
        <div class="suppliertitle" style="color: rgb(121, 120, 120);">
          <div>服务商选定</div>
          <div style="margin-left: 20px;">{{['指定服务商','比选服务商'][form.selectMode]||'-'}}</div>
        </div>
      </div>
      <el-table :data="form.supplierCompares" max-height="550px" style="width: 100%">
        <el-table-column label="序号" width="100">
          <template slot-scope="scope">
            <div> {{ scope.$index + 1 }} </div>
          </template>
        </el-table-column>
        <el-table-column prop="supplierName" label="供应商名称" min-width="160" />
        <el-table-column prop="address" label="地址" min-width="160" />
        <el-table-column prop="contact" label="联系人" min-width="160" />
        <el-table-column prop="telephone" label="联系电话" show-overflow-tooltip min-width="160">
          <template slot-scope="{row}">
            <div> {{ row.telephone || '-' }} </div>
          </template>
        </el-table-column>
        <el-table-column prop="website" label="官网" show-overflow-tooltip min-width="160">
          <template slot-scope="{row}">
            <div> {{ row.website || '-' }} </div>
          </template>
        </el-table-column>
        <el-table-column prop="file" label="附件" min-width="160">
          <template slot-scope="scope">
            <el-link :disabled="!(scope.row.file)" icon="el-icon-document" type="primary" :href=" scope.row.file"
              target="_blank">
              附件资料</el-link>
          </template>
        </el-table-column>
        <el-table-column prop="website" label="供应商特点描述" show-overflow-tooltip min-width="160">
          <template slot-scope="{row}">
            <div> {{ row.description || '-' }} </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="220" fixed="right">
          <template slot-scope="scope">
            <el-button size="small" type="primary" icon="el-icon-view" @click="handleSelectImage(scope.row.image)">
              图片
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-divider>比选结果</el-divider>
    <div class="dialog_left children">
      <div style="margin:0 0 15px 0;color: red;font-size: 12px;">注：审核通过后，新服务商将自动加入供应商管理模块中
      </div>
      <div class="suppliertitle">
        <div>选定服务商：</div>
        <div style="margin-left: 10px;">{{form.selectSupplierName||'-'}}</div>
      </div>
      <div class="suppliertitle">
        <div style="margin-left: 15px;">选定原因：
        </div>
        <div style="margin-left: 10px;">{{form.selectSupplierReason ||'-'}}</div>
      </div>
    </div>
    <el-divider>处理信息</el-divider>
    <div class="dialog_left children">
      <el-descriptions direction="vertical" :column="4" border>
        <el-descriptions-item label="处理时间" :labelStyle="labelStyle">{{ form.repairVo && form.repairVo.repairTime || '-'
        }}
        </el-descriptions-item>
        <el-descriptions-item label="委外服务商">{{ form.supplierName || '-' }}</el-descriptions-item>
        <el-descriptions-item label="联系人">{{ form.liaison || '-' }}</el-descriptions-item>
        <el-descriptions-item label="联系方式">{{ form.phone || '-' }}</el-descriptions-item>
        <el-descriptions-item label="处理结果" :labelStyle="labelStyle">
          <div :style="'color:' + ['#67C23A', '#F56C6C'][form.repairVo && form.repairVo.treatmentResult]">
            {{ ['已解决', '故障'][form.repairVo && form.repairVo.treatmentResult] || '-' }}
          </div>
        </el-descriptions-item>
        <el-descriptions-item label="故障原因" :span="3">{{ form.repairVo && form.repairVo.faultReason || '-' }}
        </el-descriptions-item>
        <!-- <el-descriptions-item label="处理人">{{ repairers(form.repairers,0)  || '-' }}</el-descriptions-item> -->
        <!-- <el-descriptions-item label="协同处理人">{{ repairers(form.repairers,1)  || '-' }}</el-descriptions-item> -->
      </el-descriptions>
      <el-descriptions :column="4" border>
        <el-descriptions-item label="处理内容" :span="4" :labelStyle="labelStyle">{{ form.repairVo &&
        form.repairVo.treatmentContent || '-'
        }}</el-descriptions-item>
        <el-descriptions-item label="预防措施" :span="4" :labelStyle="labelStyle">{{ form.repairVo &&
        form.repairVo.precaution || '-'
        }}</el-descriptions-item>
        <el-descriptions-item label="处理图片" :span="4" :labelStyle="labelStyle">
          <div v-if="repairImages(form.repairVo && form.repairVo.repairImages, 1).length">
            <Image-preview v-for="(item, i) in repairImages(form.repairVo && form.repairVo.repairImages, 1)"
              style="margin-left:20px" :key="i" :src="item.image" width="100px" height='100px'></Image-preview>
          </div>
          <div v-else style="color: #ccc;">
            暂无图片信息
          </div>
        </el-descriptions-item>
        <el-descriptions-item label="处理视频" :span="4" :labelStyle="labelStyle">
          <video v-if="form.repairVo && form.repairVo.treatmentVideo"
            :src="form.repairVo && form.repairVo.treatmentVideo" width="390" height="200"
            style="background-color: black" controls="controls">
            您的浏览器不支持视频播放
          </video>
          <div v-else style="color: #ccc;">暂无视频信息</div>

        </el-descriptions-item>
      </el-descriptions>
      <!-- 图片显示组件 -->
      <template v-if="ImageOpen">
        <Dialog-image :src="imageSrc" />
      </template>
    </div>
  </div>
</template>

<script>
import { listDetail } from '@/api/maintenance/management/Outsourcing.js'
export default {
  name: 'detailed',
  props: {
    parentid: {
      type: Number,
      required: true
    }
  },
  data () {
    return {
      form: {},//基本信息
      EquipmentList: [],//相关设备
      MaterialList: [],//相关物料
      //label样式
      labelStyle: { 'width': '405.5px' },
      imageSrc: undefined,//图片预览参数
      ImageOpen: false,
    }
  },
  created () {
    this.getlist()
  },
  methods: {
    async getlist () {
      const { data: res } = await listDetail(this.parentid);
      this.form = res
    },
    repairers (arr, val) {
      if (arr == undefined || arr.length == 0) {
        return ''
      }
      let data = []
      if (val) {
        data = arr.filter(item => {
          return item.type != 0
        })
      } else {
        data = arr.filter(item => {
          return item.type == 0
        })
      }
      return data.map(item => item.repairerName).join(',')
    },
    repairImages (arr, val) {
      if (arr == undefined || arr.length == 0) {
        return []
      }
      let data = []
      if (val) {
        data = arr.filter(item => {
          return item.type != 0
        })
      } else {
        data = arr.filter(item => {
          return item.type == 0
        })
      }
      return data
    },
    handleSelectImage (src) {
      this.imageSrc = src
      this.ImageOpen = true
    },
  }
}
</script>

<style lang="scss" scoped>
.center_dialog {
  width: 90%;
  margin: 0px auto;
}

.dialog_left {
  width: 100%;
}

.image_flex {
  display: flex;
}

// .dialog_left>div:nth-child(1){
//   flex:1
// }
// .dialog_left>div:nth-child(2){
//   flex:10;
//   margin-left:10px
// }
/* el-descriptions-item 文字居中 */
::v-deep .el-descriptions__body .el-descriptions__table .el-descriptions-item__cell {
  text-align: center;
}

.contentStyle {
  width: 200px;
}

.suppliertitle {
  display: flex;
  font-size: 14px;
  color: #000;
  margin-top: 10px;
  margin-bottom: 10px;

}
</style>